<template>

  <el-row>
    <el-col :span="4">
      <img
          src="https://image.izyz.org/obs-izy/upload/orgRegisterPic/idcard/20230806/1691313634776.jpeg?x-oss-process=image/resize,m_fixed,h_100,w_155"
          alt="Image" style="width: 100%;"/>
    </el-col>
    <el-col :span="20" style="padding: 20px">
      <div>
        <h3></h3>
        <p></p>
        <el-progress :percentage="10"/>
        <el-col :span="5" class="sou">
          <el-input v-model="input" class="w-50 m-2" placeholder="搜索公益项目">
            <template #suffix>
              <button @click="getInput">
                <el-icon>
                  <search/>
                </el-icon>
              </button>
            </template>
          </el-input>
        </el-col>
        <div class="main-top">
          <div v-for="item in helplist" :key="item.hid" class="top">
            <el-row>
              <el-col :span="7">
                <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/charity-static-file/e15c85bd9678472098e669c98b7f39521450709324278847099.png"
                    alt="Image" style="width: 100%;" @click="getPage(item.hid)"/>
              </el-col>
              <el-col :span="17" style="padding: 20px">
                <div>
                  <h3>{{ item.htitle }}</h3>
                  <p>{{ item.hsubhead }}</p>
                  <p>地址：{{ item.hposition }}</p>
                  <p>时间：{{ item.hdatatime }}</p>


                </div>
                <div class="col">

                  <div class="button">
                    <el-button type="warning" @click="dialog=true" round>我要报名</el-button>
                  </div>

                </div>


              </el-col>
            </el-row>
          </div>
        </div>
        <div>
          <el-col>
            <!-- <el-pagination
                     v-model:current-page="currentPage"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-size="[5,10,15,20]"

                     layout="total,sizes,  prev, pager, next, jumper"
                     :total="totalPage"


             />-->
            <el-pagination background layout="prev,pager,next"
                           :total="totalPage"

                           :page-size="pagesize"
                           v-model:current-page="currentPage"
                           @update:@current-change="handleCurrentChange"
            />
          </el-col>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import doThis from "@/api/getData";

export default {
  name: "HelpList",
  data() {
    return {
      helplist: [],
      helpvo: {},
      input: '',
      currentPage: 1,
      pagesize: 1,
      totalPage: 100

    }
  },
  methods: {
    /*模糊搜索*/
    getInput() {
      doThis.doGet("/helplist/list", {htitle: this.input}).then(res => {
        console.log(res)
        this.helplist = res.data


      })
    },

    /*点击进入*/
    getPage(hid) {
      this.$router.push('/front/helpDetail/' + hid);
    },
    handleSizeChange(val) {
      console.log(val)
    },
    /*分页*/
    handleCurrentChange(val) {
      this.currentPage = val //更新当前页码
      this.getInput()   // 获取指定页码的数据
    },
  },


  mounted() {
    /*查询所有*/
    doThis.doGet("/helplist/list", null).then(res => {
      console.log(res)
      this.helplist = res.data
      this.totalPage = this.helplist.length


    });
  }
}
</script>

<style scoped>
.main-top {
  margin: 0 auto;
  width: 1200px;
}

.button {
  position: relative;
  left: 300px;
  top: -50px;
}

.sou {
  margin: 10px 140px;
}

.ye {
  width: 200px;
  margin: 0 auto;
}
</style>